<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/book/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/book/css/index.css">
    <title>首页</title>
</head>
<body>
    {{--顶部首页--}}
    <header>
        <a href=""><span>爱读书</span></a>
        <a href=""><img src="/book/images/search.png" alt=""></a>
        <a href=""><span>个人中心</span></a>
    </header>

    {{--轮播--}}
    <div class="slider">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><a href=""> <img class="img-banner" src="/book/images/banner1.jpg" alt=""></a></div>
                <div><a href=""> <img class="img-banner" src="/book/images/banner2.jpg" alt=""></a></div>
                <div><a href=""> <img class="img-banner" src="/book/images/banner3.jpg" alt=""></a></div>
                <div><a href=""> <img class="img-banner" src="/book/images/banner1.jpg" alt=""></a></div>
            </div>
        </div>
    </div>

    {{--导航区--}}
    <div class="nav">
        <div class="nav-detail">
            <a href=""><img src="/book/images/girl.png" alt=""></a>
            <a href=""><span>女频</span></a>
        </div>
        <div class="nav-detail">
            <a href=""><img src="/book/images/man.png" alt=""></a>
            <a href=""><span>男频</span></a>
        </div>
        <div class="nav-detail">
            <a href=""><img src="/book/images/rank.png" alt=""></a>
            <a href=""><span>热书</span></a>
        </div>
        <div class="nav-detail">
            <a href=""><img src="/book/images/cate.png" alt=""></a>
            <a href=""><span>分类</span></a>
        </div>
    </div>

    {{-- 热销书籍 --}}
    <div class="book-type-one">
        <div class="book-type-one-title">
            {{--<div><i>|</i></div>--}}
            <div><span>热销书籍</span></div>
            <div><a href="">更多</a></div>
        </div>
        <div class="book-type-one-list">
            <div class="book-type-one-detail">
                <a href="/book/book/bookInfo">
                    <img src="/book/images/list1.jpg" alt="">
                    <div>萌宝驾到：总裁爹地轻点宠</div>
                    <span>浮生一颗小秘密</span>
                </a>
            </div>
            <div class="book-type-one-detail">
                <a href="">
                    <img src="/book/images/list1.jpg" alt="">
                    <div>萌宝驾到</div>
                    <span>浮生  著</span>
                </a>
            </div>
            <div class="book-type-one-detail">
                <a href="">
                    <img src="/book/images/list1.jpg" alt="">
                    <div>萌宝驾到：总裁爹地轻点宠</div>
                    <span>浮生  著</span>
                </a>
            </div>
            <div class="book-type-one-detail">
                <a href="">
                    <img src="/book/images/list1.jpg" alt="">
                    <div>萌宝驾到：总裁爹地轻点宠</div>
                    <span>浮生  著</span>
                </a>
            </div>
            <div class="book-type-one-detail">
                <a href="">
                    <img src="/book/images/list1.jpg" alt="">
                    <div>萌宝驾到：总裁爹地轻点宠</div>
                    <span>浮生  著</span>
                </a>
            </div>
        </div>
    </div>

    {{-- 原创精品 --}}
    <div class="book-type-two">
        <div class="book-type-two-title">
            {{--<div><i>|</i></div>--}}
            <div><span>原创精品</span></div>
            <div><a href="">更多</a></div>
        </div>
        <div class="book-type-two-list">

            <a class="book-type-two-detail" href="">
                <img src="/book/images/list1.jpg" alt="">
                <div class="book-type-two-detail-descr">
                    <div>特种兵王陈羽意外穿越到满清建立之前。他魂穿在一位年轻的阵亡士兵身上，四处征战，改变历史……</div>
                    <div>
                        <span>都市言情</span>
                        <span>2021浏览</span>
                    </div>
                </div>
            </a>

            <a class="book-type-two-detail" href="">
                <img src="/book/images/list1.jpg" alt="">
                <div class="book-type-two-detail-descr">
                    <div>特种兵王陈羽意外穿越到满清建立之前。他魂穿在一位年轻的阵亡士兵身上，四处征战，改变历史……</div>
                    <div>
                        <span>都市言情</span>
                        <span>2021浏览</span>
                    </div>
                </div>
            </a>

            <a class="book-type-two-detail" href="">
                <img src="/book/images/list1.jpg" alt="">
                <div class="book-type-two-detail-descr">
                    <div>特种兵王陈羽意外穿越到满清建立之前。他魂穿在一位年轻的阵亡士兵身上，四处征战，改变历史……</div>
                    <div>
                        <span>都市言情</span>
                        <span>20210000浏览</span>
                    </div>
                </div>
            </a>


        </div>
    </div>

    {{--底部--}}
    <footer>
        <p>属于个人产品 请勿商用 如需要商用请联系作者</p>
        <p>QQ：1358537355</p>
        <p>email：wmlzy6@163.com</p>
    </footer>
</body>
<script src="/book/layui/layui.js"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            ,interval:1500
            ,height:'180px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</html>